<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频监控系统</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Microsoft YaHei', sans-serif;
    }

    body {
      background-color: #f5f5f5;
      color: #333;
      padding: 20px;
    }

    .container {
      max-width: 1600px;
      margin: 0 auto;
    }

    header {
      margin-bottom: 20px;
      text-align: center;
    }

    h1 {
      color: #2c3e50;
      margin-bottom: 10px;
    }

    .control-panel {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }

    .tab-container {
      margin-bottom: 15px;
    }

    .tab {
      display: inline-block;
      padding: 10px 20px;
      background-color: #ecf0f1;
      border: none;
      cursor: pointer;
      font-size: 14px;
      border-radius: 4px 4px 0 0;
      margin-right: 5px;
    }

    .tab.active {
      background-color: #3498db;
      color: white;
    }

    .tab-content {
      display: none;
      padding: 15px;
      border: 1px solid #ecf0f1;
      border-radius: 0 4px 4px 4px;
    }

    .tab-content.active {
      display: block;
    }

    .form-group {
      margin-bottom: 15px;
    }

    label {
      display: inline-block;
      width: 120px;
      font-weight: bold;
      margin-right: 10px;
    }

    input, select, button {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
    }

    select {
      width: 200px;
    }

    input[type="text"], input[type="datetime-local"] {
      width: 200px;
    }

    button {
      background-color: #3498db;
      color: white;
      border: none;
      cursor: pointer;
      padding: 10px 20px;
      margin-right: 10px;
    }

    button:hover {
      background-color: #2980b9;
    }

    .video-container {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    #player {
      width: 100%;
      height: 600px;
      background-color: #000;
      border-radius: 4px;
      margin-bottom: 15px;
    }

    .screen-control {
      text-align: center;
      margin-bottom: 15px;
    }

    .screen-btn {
      background-color: #ecf0f1;
      color: #333;
      border: none;
      padding: 5px 10px;
      margin: 0 5px;
    }

    .screen-btn.active {
      background-color: #3498db;
      color: white;
    }
  </style>
  <script type="text/javascript" src="http://lib.cvtsp.com/video/CVNetVideoJs/1.3.0/CvNetVideo.js"></script>
</head>
<body>
<div class="container">
  <header>
    <h1>视频监控系统</h1>
    <p>基于CvNetVideo.js 1.3.0实现</p>
  </header>

  <div class="control-panel">
    <div class="tab-container">
      <button class="tab active" onclick="openTab(event, 'realtime')">实时视频</button>
      <button class="tab" onclick="openTab(event, 'history')">历史视频</button>
      <button class="tab" onclick="openTab(event, 'control')">云台控制</button>
      <button class="tab" onclick="openTab(event, 'intercom')">对讲</button>
    </div>

    <!-- 实时视频选项卡 -->
    <div id="realtime" class="tab-content active">
      <div class="form-group">
        <label for="txtsim">SIM卡号:</label>
        <input type="text" id="txtsim" placeholder="输入SIM卡号">
      </div>
      <div class="form-group">
        <label for="cmbChannel">通道号:</label>
        <select id="cmbChannel">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </div>
      <div class="form-group">
        <label for="cmbStreamType">码流类型:</label>
        <select id="cmbStreamType">
          <option value="0">主码流</option>
          <option value="1">子码流</option>
        </select>
      </div>
      <div class="form-group">
        <label for="serveradd">服务器地址:</label>
        <input type="text" id="serveradd" value="47.101.172.55" placeholder="服务器IP或域名">
      </div>
      <div class="form-group">
        <button onclick="startRealTimeVideo()">开始播放</button>
        <button onclick="stopVideo()">停止播放</button>
        <button onclick="captureImage()">截图</button>
        <button onclick="startRecord()">开始录像</button>
        <button onclick="stopRecord()">停止录像</button>
      </div>
    </div>

    <!-- 历史视频选项卡 -->
    <div id="history" class="tab-content">
      <div class="form-group">
        <label for="txtsim2">SIM卡号:</label>
        <input type="text" id="txtsim2" placeholder="输入SIM卡号">
      </div>
      <div class="form-group">
        <label for="cmbChannel2">通道号:</label>
        <select id="cmbChannel2">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </div>
      <div class="form-group">
        <label for="cmbMediaType">媒体类型:</label>
        <select id="cmbMediaType">
          <option value="0">音视频</option>
          <option value="1">音频</option>
          <option value="2">视频</option>
          <option value="3">视频或音视频</option>
        </select>
      </div>
      <div class="form-group">
        <label for="startTime">开始时间:</label>
        <input type="datetime-local" id="startTime">
      </div>
      <div class="form-group">
        <label for="endTime">结束时间:</label>
        <input type="datetime-local" id="endTime">
      </div>
      <div class="form-group">
        <button onclick="playbackVideo()">播放历史</button>
        <button onclick="pausePlayback()">暂停</button>
        <button onclick="resumePlayback()">继续</button>
        <button onclick="stopPlayback()">停止</button>
      </div>
    </div>

    <!-- 云台控制选项卡 -->
    <div id="control" class="tab-content">
      <div class="form-group">
        <label for="txtsim3">SIM卡号:</label>
        <input type="text" id="txtsim3" placeholder="输入SIM卡号">
      </div>
      <div class="form-group">
        <label for="cmbChannel3">通道号:</label>
        <select id="cmbChannel3">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </div>
      <div class="form-group">
        <button onclick="ptzUp()">上</button>
        <button onclick="ptzDown()">下</button>
        <button onclick="ptzLeft()">左</button>
        <button onclick="ptzRight()">右</button>
      </div>
      <div class="form-group">
        <button onclick="ptzZoomIn()">放大</button>
        <button onclick="ptzZoomOut()">缩小</button>
        <button onclick="ptzFocusIn()">聚焦+</button>
        <button onclick="ptzFocusOut()">聚焦-</button>
      </div>
    </div>

    <!-- 对讲选项卡 -->
    <div id="intercom" class="tab-content">
      <div class="form-group">
        <label for="txtsim4">SIM卡号:</label>
        <input type="text" id="txtsim4" placeholder="输入SIM卡号">
      </div>
      <div class="form-group">
        <label for="cmbChannel4">通道号:</label>
        <select id="cmbChannel4">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </div>
      <div class="form-group">
        <label for="volume">音量:</label>
        <input type="range" id="volume" min="0" max="10" value="1" step="0.1">
        <span id="volumeValue">1.0</span>
      </div>
      <div class="form-group">
        <button onclick="startSpeak()">开始对讲</button>
        <button onclick="stopSpeak()">结束对讲</button>
      </div>
    </div>
  </div>

  <div class="video-container">
    <div class="screen-control">
      <button class="screen-btn active" onclick="changeScreen(1)">1分屏</button>
      <button class="screen-btn" onclick="changeScreen(4)">4分屏</button>
      <button class="screen-btn" onclick="changeScreen(6)">6分屏</button>
      <button class="screen-btn" onclick="changeScreen(9)">9分屏</button>
      <button class="screen-btn" onclick="changeScreen(16)">16分屏</button>
    </div>
    <div id="player"></div>
  </div>
</div>

<script type="text/javascript">
  let ucMain = null;
  let currentScreen = 1;

  // 页面加载完成后初始化播放器
  window.onload = function() {
    initPlayer();

    // 音量控制
    const volumeSlider = document.getElementById('volume');
    const volumeValue = document.getElementById('volumeValue');

    volumeSlider.addEventListener('input', function() {
      volumeValue.textContent = this.value;
    });
  };

  // 初始化播放器
  function initPlayer() {
    ucMain = CvNetVideo.Init(document.querySelector('#player'), currentScreen, {
      remoteHost: document.querySelector("#serveradd").value,
      //集群管理地址
      clusterHost: "47.101.172.55",
      //集群管理端口
      clusterPort: 17001,
      //服务器Ws端口 默认18002(集群版本之后不需设置，会自动从集群管理获取)
      remotePortWs: 18002,
      //服务器FMP4端口 默认18003(集群版本之后不需设置，会自动从集群管理获取)
      remotePortFmp4: 18003,
      playerMode: 0, // 自动选择播放模式
      MaxUcNum: 16, // 最大分屏数量
      videoWidth: 352,
      videoHeight: 288,
      events: {
        onDevConnect: function(devId, chnlId, streamType, success) {
          console.log(`设备连接状态: ${devId}-${chnlId}-${streamType}, ${success ? '成功' : '失败'}`);
        },
        onDevDisconnect: function(devId, chnlId, streamType) {
          console.log(`设备断开连接: ${devId}-${chnlId}-${streamType}`);
        },
        onCapture: function(base64png, id, ucVideo) {
          console.log(`截图完成: ${id}`);
          // 可以在这里处理截图数据
        },
        onEndRecord: function(blob, info, id, ucVideo) {
          console.log(`录制完成: ${id}, ${JSON.stringify(info)}`);
          // 可以在这里处理录制数据
        }
      },
      callback: function() {
        console.log('播放器初始化完成');
      }
    });
  }

  // 切换选项卡
  function openTab(evt, tabName) {
    const tabContents = document.getElementsByClassName("tab-content");
    for (let i = 0; i < tabContents.length; i++) {
      tabContents[i].classList.remove("active");
    }

    const tabs = document.getElementsByClassName("tab");
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].classList.remove("active");
    }

    document.getElementById(tabName).classList.add("active");
    evt.currentTarget.classList.add("active");
  }

  // 切换分屏
  function changeScreen(num) {
    currentScreen = num;

    const screenBtns = document.getElementsByClassName("screen-btn");
    for (let i = 0; i < screenBtns.length; i++) {
      screenBtns[i].classList.remove("active");
    }

    evt.currentTarget.classList.add("active");

    if (ucMain) {
      ucMain.LayoutByScreens(num);
    }
  }

  // 开始实时视频
  function startRealTimeVideo() {
    if (!ucMain) {
      alert('播放器未初始化');
      return;
    }

    const sim = document.querySelector('#txtsim').value;
    if (!sim) {
      alert('请输入SIM卡号');
      return;
    }

    ucMain.StartRealTimeVideo(
            sim,
            parseInt(document.querySelector('#cmbChannel').value),
            parseInt(document.querySelector('#cmbStreamType').value),
            true, // 打开音频
            0, // 当前选中窗口
            {
              remoteHost: document.querySelector("#serveradd").value
            }
    );
  }

  // 停止视频
  function stopVideo() {
    if (ucMain) {
      ucMain.Stop();
    }
  }

  // 截图
  function captureImage() {
    if (ucMain) {
      ucMain.Capture();
    }
  }

  // 开始录像
  function startRecord() {
    if (ucMain) {
      ucMain.StartRecord();
    }
  }

  // 停止录像
  function stopRecord() {
    if (ucMain) {
      ucMain.StopRecord();
    }
  }

  // 播放历史视频
  function playbackVideo() {
    if (!ucMain) {
      alert('播放器未初始化');
      return;
    }

    const sim = document.querySelector('#txtsim2').value;
    if (!sim) {
      alert('请输入SIM卡号');
      return;
    }

    ucMain.PlaybackVideo(
            sim,
            parseInt(document.querySelector('#cmbChannel2').value),
            parseInt(document.querySelector('#cmbMediaType').value),
            0, // 码流类型
            0, // 存储类型
            0, // 回放模式
            0, // 倍速
            document.querySelector('#startTime').value,
            document.querySelector('#endTime').value,
            0, // 当前选中窗口
            {
              remoteHost: document.querySelector("#serveradd").value
            }
    );
  }

  // 暂停回放
  function pausePlayback() {
    if (ucMain) {
      ucMain.PlaybackVideoControl(
              document.querySelector('#txtsim2').value,
              parseInt(document.querySelector('#cmbChannel2').value),
              1, // 暂停回放
              0, // 倍速
              ''
      );
    }
  }

  // 继续回放
  function resumePlayback() {
    if (ucMain) {
      ucMain.PlaybackVideoControl(
              document.querySelector('#txtsim2').value,
              parseInt(document.querySelector('#cmbChannel2').value),
              0, // 开始回放
              0, // 倍速
              ''
      );
    }
  }

  // 停止回放
  function stopPlayback() {
    if (ucMain) {
      ucMain.PlaybackVideoControl(
              document.querySelector('#txtsim2').value,
              parseInt(document.querySelector('#cmbChannel2').value),
              2, // 结束回放
              0, // 倍速
              ''
      );
    }
  }

  // 云台控制 - 上
  function ptzUp() {
    // 这里需要根据实际云台控制API实现
    console.log('云台向上');
  }

  // 云台控制 - 下
  function ptzDown() {
    console.log('云台向下');
  }

  // 云台控制 - 左
  function ptzLeft() {
    console.log('云台向左');
  }

  // 云台控制 - 右
  function ptzRight() {
    console.log('云台向右');
  }

  // 云台控制 - 放大
  function ptzZoomIn() {
    console.log('云台放大');
  }

  // 云台控制 - 缩小
  function ptzZoomOut() {
    console.log('云台缩小');
  }

  // 云台控制 - 聚焦+
  function ptzFocusIn() {
    console.log('聚焦+');
  }

  // 云台控制 - 聚焦-
  function ptzFocusOut() {
    console.log('聚焦-');
  }

  // 开始对讲
  function startSpeak() {
    if (!ucMain) {
      alert('播放器未初始化');
      return;
    }

    const sim = document.querySelector('#txtsim4').value;
    if (!sim) {
      alert('请输入SIM卡号');
      return;
    }

    ucMain.StartSpeek(
            sim,
            parseInt(document.querySelector('#cmbChannel4').value),
            {
              remoteHost: document.querySelector("#serveradd").value
            }
    );

    // 设置音量
    const volume = parseFloat(document.getElementById('volume').value);
    ucMain.SetSpeekVolume(volume);
  }

  // 结束对讲
  function stopSpeak() {
    if (ucMain) {
      ucMain.StopSpeak();
    }
  }
</script>
</body>
</html>